<!-- 令牌租借 -->
<template>

  <div class="pag" >
    <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll" @scroll="pagScroll" :scrollEvents="['scroll']">
    <token-head @fresh="freshHandle"></token-head>
    <div class="my-bond">
      <div class="lb">
        <span class="remind-spot" v-if="tokenInfo.notification.leaseStatus !== null && tokenInfo.notification.leaseStatus < 5 && tokenInfo.notification.leaseStatus != -1"></span>
        我的保证金
      </div>
      <i>{{ tokenInfo.depositCvnt }}</i>
      <button class="my-btn" @click="goPath('addBond')">增加</button>
      <button class="my-btn" @click="goPath('drawBond')"
              :style="{opacity: tokenInfo.notification.leaseStatus !== null && tokenInfo.notification.leaseStatus < 3 && tokenInfo.notification.leaseStatus != -1 ? 0 : 1}"
              :disabled="tokenInfo.notification.leaseStatus !== null && tokenInfo.notification.leaseStatus < 3 && tokenInfo.notification.leaseStatus != -1 ? true : false">提取</button>
    </div>
    <div class="my-btns1">
      <div @click="showNotice">我需要令牌</div>
      <!-- 按产品要求更改 <div @click="goPath('/borrowOrderOut')">我需要令牌</div>-->
      <div @click="goPath('/borrowpub')">我发布的</div>
    </div>
    <div class="borrow-list">
      <div class="borrow-head">
        <div style="display: flex;align-items: center;">
          <span>租借广场</span>
          <div @click="goPath('/explain')" class="b-fq"><img src="~assets/images/token/fq.png" alt=""></div>
        </div>
        <div v-if="tokenInfo.lastIncomeAbility" class="lastIncomeAbility">昨日全网节点平均收益：<label>{{  tokenInfo.lastIncomeAbility | numAddSepFixed2 }}CVNT</label></div>
      </div>
      <div class="borrow-body">
          <div class="borrow-item" v-for="item in list">
            <div class="borrow-item-top">
              <div class="b-time">{{ item.createTime }}</div>
              <div class="b-name">{{ item.nickname }}</div>
              <div class="b-btn" @click="goPath('borrowOrder', item)">租给他</div>
            </div>
            <div class="borrow-item-main">
              <div class="borrow-item-data">
                <label>租用数量</label>
                <p>{{ item.num }}块</p>
              </div>
              <div class="borrow-item-data">
                <label>租用时间</label>
                <p>{{ item.days }}天</p>
              </div>
              <div class="borrow-item-data">
                <label>出让收益比</label>
                <p>{{ item.scale }}%</p>
              </div>
              <div class="borrow-item-data">
                <label>矿工节点日均产出</label>
                <p v-if="item.isLowIncome == 2">{{ item.averageRevenue | numAddSepFixed2 }}</p>
                <p v-else style="color: #FF6161">低于全网平均值</p>
              </div>
            </div>
          </div>
      </div>
      <list-empty txt="暂无数据" v-if="list && list.length == 0"></list-empty>
    </div>
    </cube-scroll>
    <div class="backtop" v-show="backTopShow" @click.stop="toBackTop">
      <img src="~assets/images/miningboard/back-top.png" alt="" >
    </div>
    <!-- 提示框 -->
    <alert ref="tipPopup">
      抱歉！因为您之前的违规行为<br>我们将限制您一周内不能使用租借功能
    </alert>
  </div>

</template>

<script>
    import listEmpty from 'cpnts/list-empty.vue'
    import alert from 'cpnts/alert.vue'
import tokenHead from 'cpnts/token-head.vue'
import { getRentSquare, getRentViolationNum } from 'api'

  export default {
      components: {
          'tokenHead': tokenHead,
          'alert': alert,
          'listEmpty': listEmpty,
      },
    data() {
      return {
          backTopShow: false,
          list: null,
          rentViolationNum: 0,
          options: {
              pullUpLoad: true
          }
      }
    },
      computed: {
          tokenInfo(){
              return  this.$store.state.tokenInfo
          },
          isRentViolation(){
              return this.rentViolationNum > 2
          }
      },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
          vm.loadPage()
          //vm.$refs.tipPopup.show()
      })
    },
    methods: {
        pagScroll({y}){
            if(y < -380){
                this.backTopShow = true
            }else{
                this.backTopShow = false
            }
        },
        toBackTop(){
          this.$refs.scroll.scrollTo(0,0,1000)
        },
        freshHandle(){
            this.loadPage()
        },
        loadPage(){
            this.resetData()
            // this.getData()
            this.getRentViolationNum()
            this.$store.dispatch('getTokenInfo')
        },
          resetData(){
              this.list = null
              this.rentViolationNum = 0
          },
        async getRentViolationNum(){
            try {
                let {data} = await getRentViolationNum({})
                this.rentViolationNum = data.num
            } catch (e) {
                this.toastTip(e.info)
            }
        },
        goPath(path, query={}){
            if(this.isRentViolation){
                return this.$refs.tipPopup.show()
            }
            this.$router.push({path, query});
        },
        showNotice() {
            this.toastTip('功能已关闭');
        },
        goOrder(item){
            this.$router.push({path: '/borrowOrder', query: {
                  item
                }});
        },
          goBond(path){
              this.$router.push({path, query: {

                  }});
          },
        async onPullup() {
            /*let me = this
            let sc = this.$refs['scroll']
            if (me['list'].length < 20) {
                return this.getData()
            }

            let pagec = Math.floor((this.list.length - 20) / 20) + 1
            let pagey = (this.list.length - 20) % 20
            try {
                let {data} = await getRentSquare({
                    per: 20,
                    page: 1 + pagec
                })
                if (!data) {
                    sc.forceUpdate()
                    return
                }
                if (pagey) {
                    data.splice(0, pagey)
                }
                me['list'] = me['list'].concat(data)
                if (!data.length) {
                    sc.forceUpdate()
                } else {
                    this.$nextTick(() => {
                        sc.forceUpdate(true)
                    })
                }
            } catch (e) {
                this.toastTip(e.info)
                sc.forceUpdate()
            }*/


        },
        async getData() {
            /*let sc = this.$refs['scroll']
            try {
                let {data} = await getRentSquare({
                    per: 20,
                    page: 1
                })
                if (!data) {
                    this['list'] = []
                    sc.forceUpdate()
                    return
                }
                this['list'] = data
                this.$nextTick(() => {
                    sc.forceUpdate(true)
                })
            } catch (e) {
                this.toastTip(e.info)
                sc.forceUpdate()
            }*/
        },
        toastTip(info) {
            this.$warn(info)
        }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow: hidden;
    line-height: 1.31;
    //line-height: 1.0714285714285714;
  }

  .my-bond {
    //width:690px;
    min-height: 100px;
    height:100px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: 30px 30px 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    .lb {
      font-size:24px;
      color:rgba(113,118,140,1);
      position: relative;
      .remind-spot {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
      }
    }
    i {
      font-size:40px;
      font-weight:600;
      color:rgba(32,44,91,1);
      font-style: normal;
      flex: 1;
      padding-right: 28px;
      text-align: right;
      &:after {
        content: 'CVNT';
        display: inline;
        font-size: 26px;
      }
    }
  }



  .my-btn {
    width:110px;
    height:60px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
    font-weight:400;
    color:rgba(255,255,255,1);
    padding: 0;
    outline: none;
    box-shadow: none;
    border: none;
    &:last-child {
      margin-right: 0;
    }
  }


  .my-btns1 {
    display: flex;
    justify-content: center;
    margin: 30px auto 0 auto;
    > div {
      width:330px;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:32px;
      color:rgba(255,255,255,1);
      margin-right: 30px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .borrow-list {
    background:rgba(255,255,255,1);
    padding: 0 30px 70px 30px;
    margin-top: 30px;
  }

  .borrow-head {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:34px;
    color:rgba(32,44,91,1);
    span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:before {
        margin-right: 15px;
        content: '';
        width:6px;
        height:36px;
        background:rgba(43,117,243,1);
      }
    }

  }


  .borrow-item {
    height:188px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 6px 0px rgba(102,102,102,0.3);
    border-radius:14px;
    margin-bottom: 24px;
  }

  .borrow-item-top {
    padding-top: 12px;
    font-size:28px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 29px;
  }



  .b-time {
    width:259px;
    min-height: 28px;
    height:28px;
    background:rgba(23,62,143,.4);
    border-radius:0px 14px 14px 0px;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    //text-align: center;
  }

  .b-name {
    flex: 1;
    padding: 0 20px 0 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.31;
  }

  .b-btn {
    width:142px;
    height:52px;
    background:rgba(23,62,143,1);
    border-radius:10px 0px 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
    color:rgba(255,255,255,1);
  }

  .borrow-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 31px;
  }

  .borrow-item-data {
    text-align: center;
    &:first-of-type {
      text-align: left;
    }
    &:last-of-type {
      text-align: right;
    }
    label {
      font-size:24px;
      color:rgba(113,118,140,1);
      margin-bottom: 18px;
      display: block;
    }
    p {
      font-size:26px;
      font-weight:600;
      color:rgba(32,44,91,1);
    }
  }


  .backtop {
    @include extend-click();
    position: fixed;
    right: 10px;
    bottom: 120px;
    z-index: 500;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 46px;
      height: 46px;
      display: block;
    }
  }


  .b-fq {
    display: flex;
    @include extend-click();
    img {
      margin-left: 23px;
      width: 36px;
      height: 36px;
    }
  }

  .lastIncomeAbility {
    font-size: 24px;
    color: #71768C;
    label {
      color: #202C5B;
    }
  }

</style>













